<template>

	<view class="main">
		<u-navbar :fixed="false" title="员工排班" @rightClick="rightClick" :autoBack="true"></u-navbar>
		<view class="container">

			<view class="top row space-between">

				<view class="row_a_c" @click="showTime=true">
					<view>开始时间:</view>
					<view class="stime">{{formatDate(start_date)}}</view>
					<image class="xiajian" src="/static/images/xiajian.png"></image>
					<u-datetime-picker @cancel="showTime=false" @confirm="confirmTime()" :show="showTime" v-model="start_date" mode="date" :minuteStep="1"></u-datetime-picker>
				</view>

				<view class="typea row center">
					<view class="wxzz center" :class="{ xxzz: isActive === 'month' }" @click="changeClass('month')">月</view>
					<view class="wxzz center" :class="{ xxzz: isActive === 'week' }" @click="changeClass('week')">周</view>
				</view>

			</view>

			<view class="row_a_c" @click="showTimeEnd=true">
				<view>结束时间:</view>
				<view class="stime" v-if="end_date">{{formatDate(end_date)}}</view>
				<view class="stime" v-else>选择结束时间</view>
				<image class="xiajian" src="/static/images/xiajian.png"></image>
				<u-datetime-picker :minDate="1731924800000" @cancel="showTimeEnd=false" @confirm="confirmTimeEnd()" :show="showTimeEnd" v-model="end_date" mode="date" :minuteStep="1"></u-datetime-picker>
			</view>


			<view class="bykq row_a_c space-between">

				<view class=" xx">
					<view class="xianwz">我的</view>
					<view class="xianggg"></view>
				</view>

				<image class="ppp" src="/static/images/ppp.png" @click="navTo(`/pages/scheduling/personageall`)"></image>

			</view>


			<z-paging ref="paging" v-model="ListOrderData" @query="queryList" usePageScroll>
				<view class="sxb">
					<!-- 状态 1已排班 2正常出勤 3请假 4调休 5迟到 6早退 7旷工 8缺卡 -->
					<view class="row_a_c mtt" v-for="(item, index) in listData" :key="index">
						<view class="time" @click="navTo(`/pages/index/newschedule`)">{{getsftime(item.date)}}</view>
						<view :class="['zzsddd', item.type == 1 ? 'zzsd' : '']">
							<view class="row_a_c">
								<image class="zcb" v-if="item.type==1" src="/static/images/zcb.png"></image>
								<image class="zcb" v-if="item.type==2" src="/static/images/xxii.png"></image>
								<view class="name" v-if="item.type==1">正常班</view>
								<view class="name" v-if="item.type==2">休息</view>
							</view>
							<view class="syname">09:00 - 18:00</view>
						</view>
					</view>
				</view>
			</z-paging>


		</view>

	</view>
</template>

<script>
	import RenCalendar from '@/components/ren-calendar/ren-calendar.vue';
	import api_scheduling from '@/api/scheduling.js';
	import ZPMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin';

	export default {
		mixins: [ZPMixin],
		components: {
			RenCalendar
		},
		data() {
			return {
				isActive: '',
				showTime: false,
				showTimeEnd: false,
				valueTime: null,
				access_token: null,
				userInfo: null,
				show: false,
				curDate: '',
				start_date: null,
				end_date: null,
				listData: [],
			};
		},
		async onShow() {
			this.access_token = uni.getStorageSync('access_token');
			if (!this.access_token) {
				uni.navigateTo({
					url: '/pages/auth/login'
				});
			} else {
				this.start_date = this.getNowDate();
				this.userInfo = uni.getStorageSync('userInfo');
				console.log('员工用户信息', this.userInfo);
				// this.getSchedulingStaffListFuc(); //获取员工排班列表
			}
		},

		methods: {

			changeClass(type) {
				this.isActive = type;
				if (this.isActive == 'month') {
					const { startDate, endDate } = this.getMonthStartAndEnd();
					console.log(`本月开始时间：${startDate}, 本月结束时间：${endDate}`);
					this.start_date = startDate;
					this.end_date = endDate;
					// this.getSchedulingStaffListFuc();
					this.$refs.paging.reload();
				} else {
					const { startDate, endDate } = this.getWeekStartAndEnd();
					console.log(`本周开始时间：${startDate}, 本周结束时间：${endDate}`);
					this.start_date = startDate;
					this.end_date = endDate;
					// this.getSchedulingStaffListFuc();
					this.$refs.paging.reload();
				}
			},



			//获取本周开始时间 -结束时间
			getWeekStartAndEnd() {
				const now = new Date();

				// 获取当前日期的星期（0 = Sunday, 1 = Monday, ..., 6 = Saturday）
				const dayOfWeek = now.getDay();

				// 计算本周星期一的日期
				const startOfWeek = new Date(now);
				startOfWeek.setDate(now.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1)); // 调整到星期一

				// 计算本周星期日的日期
				const endOfWeek = new Date(startOfWeek);
				endOfWeek.setDate(startOfWeek.getDate() + 6); // 调整到星期日

				// 格式化为 yyyy-mm-dd
				const formatDate = (date) => date.toISOString().split('T')[0];

				return {
					startDate: formatDate(startOfWeek),
					endDate: formatDate(endOfWeek)
				};
			},




			//获取当月开始时间 -结束时间
			getMonthStartAndEnd() {
				const now = new Date();

				// 获取当前月的开始时间
				const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1); // 当前月的第一天
				const startDate = startOfMonth.toISOString().split('T')[0]; // 格式化为 yyyy-mm-dd

				// 获取当前月的结束时间
				const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0); // 下个月的第一天减去一天
				const endDate = endOfMonth.toISOString().split('T')[0]; // 格式化为 yyyy-mm-dd

				return { startDate, endDate };
			},



			async queryList(pageNo, pageSize) {

				var per = {
					no_page: pageNo,
					page_size: pageSize,
					staff: this.userInfo.id,
					start_date: this.start_date,
				}
				if (this.keyword) {
					per.keyword = this.keyword
				}
				const res = await api_scheduling.getSchedulingStaffList(per);
				if (res.code == 1) {
					this.$refs.paging.complete(res.data.list);
				} else {
					this.kqinfo = '';
					this.clock_in = '';
					this.clock_out = '';
					this.$util.msg(res.message);
					this.$refs.paging.complete(false);
				}

			},



			//获取员工排班列表
			// async getSchedulingStaffListFuc() {
			// 	console.log('bbbbbbbbbbbbb', this.end_date);
			// 	var per = {
			// 		staff: this.userInfo.id,
			// 		start_date: this.start_date,
			// 		no_page: 1,
			// 		page_size: 100,
			// 	}
			// 	if (this.end_date) {
			// 		per.end_date = this.end_date;
			// 	}

			// 	const res = await api_scheduling.getSchedulingStaffList(per);
			// 	if (res.code == 1) {
			// 		this.listData = res.data.list;

			// 		return;
			// 	} else {
			// 		this.kqinfo = '';
			// 		this.clock_in = '';
			// 		this.clock_out = '';
			// 		this.$util.msg(res.message);
			// 		return;
			// 	}
			// },

			formatDate(value) {
				if (typeof value === 'number') {
					const date = new Date(value); // 时间戳转换为日期对象
					const year = date.getFullYear();
					const month = String(date.getMonth() + 1).padStart(2, '0');
					const day = String(date.getDate()).padStart(2, '0');
					return `${year}-${month}-${day}`;
				}
				return value; // 如果不是时间戳，则直接返回
			},



			confirmTime(e) {
				this.showTime = false;
				this.isActive = '',
					// this.getSchedulingStaffListFuc();
					this.$refs.paging.reload();
			},



			confirmTimeEnd(e) {
				this.showTimeEnd = false;
				this.isActive = '',
					this.$nextTick(() => {
						console.log('选中的结束时间:', this.end_date);
						this.end_date = this.formatDate(this.end_date);
						// this.getSchedulingStaffListFuc();
						this.$refs.paging.reload();
					});
			},




			//获取当前时间
			getNowDate() {
				const now = new Date();
				// 格式化日期为 YYYY-MM-DD
				const year = now.getFullYear(); // 获取年份
				const month = String(now.getMonth() + 1).padStart(2, '0'); // 获取月份（0-11），+1 后补零
				const day = String(now.getDate()).padStart(2, '0'); // 获取日期，补零
				const formattedDate = `${year}-${month}-${day}`;
				console.log(formattedDate); // 输出格式为 2024-10-12
				return formattedDate;
			},


			getsftime(timees) {
				const fullDate = timees;
				const shortDate = fullDate.slice(5); // 从索引 5 开始截取字符串
				console.log(shortDate); // 输出：12-10
				return shortDate;
			},


		}
	};
</script>

<style lang="scss">
	page,
	.container {
		min-height: 2100rpx;
		background-color: #ffffff;
		padding: 0 15rpx;
		margin-bottom: 80rpx;
	}

	.content {
		.change {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto;
			margin-top: 100rpx;
			height: 100rpx;
			color: #b89249;
			background-color: #21191b;
		}
	}

	.top {
		margin-top: 15rpx;
	}

	.sxb {
		padding: 0 32rpx;
		margin-top: 50rpx;
	}

	.time {
		width: 100rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.9);
	}





	.name {
		padding-left: 16rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.85);
	}

	.syname {
		font-weight: 400;
		font-size: 20rpx;
		color: rgba(0, 0, 0, 0.6);
		margin-top: 10rpx;
	}

	.zzsd {
		width: 568rpx;
		height: 144rpx;
		background: #FAFAFA !important;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 32rpx 32rpx;
	}

	.zzsddd {
		width: 568rpx;
		height: 144rpx;
		background: #FCF4F4;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 32rpx 32rpx;
	}

	::v-deep .u-modal__content {
		padding: 12px 25px 25px 25px;
		display: flex;
		justify-content: normal;
	}

	.bykq {
		padding: 0 32rpx;
		margin-top: 0rpx;
	}

	.xx {
		margin: 48rpx 0 32rpx 0;
	}

	.xianggg {
		width: 60rpx;
		height: 8rpx;
		background: linear-gradient(180deg, #EBF6F6 0%, #27CCBB 100%);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-top: 10rpx;
	}

	.xianwz {
		font-weight: 500;
		font-size: 32rpx;
		color: rgba(0, 0, 0, 0.9);
	}

	.zcb {
		width: 48rpx;
		height: 48rpx;
	}

	.mtt {
		margin-bottom: 20rpx;
	}

	.stime {
		font-weight: 400;
		font-size: 32rpx;
		color: rgba(0, 0, 0, 0.85);
		margin-left: 30rpx;
		margin-right: 8rpx;
	}

	.xiajian {
		width: 48rpx;
		height: 48rpx;
	}

	.typea {
		width: 160rpx;
		height: 68rpx;
		background: #FAFAFA;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-right: 35rpx;
	}

	.wxzz {
		width: 60rpx;
		height: 52rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.6);
	}

	.xxzz {
		width: 60rpx;
		height: 52rpx;
		background: #FFFFFF !important;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 28rpx;
		color: #27CCBB !important;
	}

	.ppp {
		width: 32rpx;
		height: 32rpx;
	}
</style>